<template>
	<view>
		<uv-navbar :title="title" bg-color="rgba(0,0,0,.0)" :placeholder='true' leftIcon="close" leftIconSize="18px"
			leftIconColor="#000000" :autoBack='true' titleStyle="font-size: 16px;font-weight: 500;color: #313c56;" />

		<scroll-view :scroll-x="true" class="filter_scroll" :style="{}">
			<view class="flex-row flex-items-center" style="height: 100%; ">
				<view v-for="(item,index) in selectedDatas" :key="index" class="filter_scroll__item"
					@click="deleteSelectedItem(index)">
					<text style="white-space: nowrap; margin-right: 6px;">{{ item.name }}</text>
					<!-- <uv-icon name="close" size="12px" color="#6B7885"></uv-icon> -->
				</view>
			</view>
		</scroll-view>

		<uv-vtabs :list="list" keyName="name" :height="scrollHeight" barWidth="110px" barBgColor="#F3F5FB"
			:barItemStyle="barItemStyle" :barItemActiveStyle="barItemActiveStyle"
			:barItemActiveLineStyle="barItemActiveLineStyle">
			<template v-for="(item,index) in list" :key="index">
				<uv-vtabs-item :index="index">

					<view class="flex-column" v-for="(item2,index2) in item.sons" :key="index2">
						<view class="flex-row flex-items-center flex-between"
							style="height: 48px; padding-left: 12px; padding-right: 12px;">
							<text class="font-weight-medium font-16" style="color: #313C56;">{{item2.name}}</text>
						</view>
						<view class="flex-row flex-wrap">
							<view v-for="(item3,index3) in item2.sons" :key="index3"
								:class="['filter-item', item3.select && 'filter-item_active'] "
								@click="tapIndex(index, index2, index3)">
								{{ item3.name }}
							</view>
						</view>
					</view>
				</uv-vtabs-item>
			</template>
		</uv-vtabs>

		<view class="filter-toolbar" :style="{height: $uv.addUnit(toolbarHeight)}">
			<view class="flex-row flex-items-center flex-center" style="height: 68px; ">
				<view class="filter-toolbar__reset flex-row-center" @click="reset">
					重置
				</view>
				<view class="filter-toolbar__confirm flex-row-center" @click="confirm">
					确定
				</view>
			</view>
		</view>
		<toast ref="toast"></toast>
	</view>
</template>

<script>
	import {
		getClassify,
		getArea
	} from "@/api/index.js"
	export default {
		data() {
			return {
				isArea: false,
				oldIDs: [],
				title: '筛选',
				selectedDatas: [],
				list: [],
				barItemStyle: {
					color: '#313C56',
					fontSize: '14px'
				},
				barItemActiveLineStyle: {
					background: '#EB7520',
					height: '20px',
					width: '4px',
					marginTop: '19px'
				},
				barItemActiveStyle: {
					color: '#EB7520',
					fontSize: '14px',
					fontWeight: 500
				}
			};
		},
		computed: {
			statusBarHeight() {
				const sys = uni.$uv.sys()
				return sys.statusBarHeight
			},
			navbarHeight() {
				return this.statusBarHeight + 44
			},
			screenWidth() {
				const sys = uni.$uv.sys()
				return sys.windowWidth
			},
			pageHeight() {
				const sys = uni.$uv.sys()
				return sys.windowHeight - this.navbarHeight
			},
			scrollHeight() {
				return this.pageHeight - this.toolbarHeight - 48
			},
			toolbarHeight() {
				const sys = uni.$uv.sys()
				return sys.safeAreaInsets.bottom + 68
			}
		},
		onLoad(info) {
			this.isArea = info.type == 'area'
			let ids = info.ids.split(',')
			this.oldIDs = ids
			if (this.isArea) {
				this.getAreaDatas(1)
			} else {
				this.getClassifyDatas()
			}

		},
		methods: {
			/**
			 * 获取分类数据
			 */
			getClassifyDatas() {
				getClassify().then((data) => {
					this.$nextTick(() => {
						this.formatData(data)
					})
				}).catch((err) => {})
			},
			/**
			 * 处理分类数据
			 * @param {Object} data 分类原数据
			 */
			formatData(data) {
				let tempList1 = uni.$uv.deepClone(data)
				for (var i = 0; i < tempList1.length; i++) {
					let sons = tempList1[i].sons
					for (var j = 0; j < sons.length; j++) {
						let id = sons[j].id
						sons[j].select = this.oldIDs.indexOf(`${id}`) >= 0
					}
				}
				let list = []
				for (var i = 0; i < tempList1.length; i++) {
					tempList1[i].sons = [{
						name: tempList1[i].name,
						sons: tempList1[i].sons
					}]
				}
				this.list = tempList1
				this.querySelectedItems()
				console.log(this.list)
			},
			/**
			 *  获取地区数据
			 */
			getAreaDatas(type) {
				getArea({
					city: '',
					type: type,
				}).then((data) => {
					this.formatAreaDatas(data, type != 1)
				}).catch(() => {})
			},
			/**
			 * 处理地区接口数据
			 */
			formatAreaDatas(data, isAbroad) {

				let item = {
					name: isAbroad ? '国外' : '国内',
					sons: []
				}
				let sonList = []
				for (var i = 0; i < data.length; i++) {
					let son = {
						name: data[i].mark,
						sons: []
					}
					let tempSons = []
					let  areaVo = data[i].areaVo
					for (var j = 0; j < areaVo.length; j++) {
						let area = areaVo[j]
						tempSons.push({
							id: area.id,
							name: area.city,
							select: this.oldIDs.indexOf(`${area.id}`) >= 0
						})
					}
					son.sons = tempSons
					sonList.push(son)
				}
				item.sons = sonList
				this.list.push(item)
				console.log(this.list)
				if (!isAbroad) {
					this.getAreaDatas(2)
				} else {
					this.querySelectedItems()
				}
				// this.list = list
			},
			/**
			 *  点击item
			 */
			tapIndex(index, index2, index3) {
				this.list[index].sons[index2].sons[index3].select = !this.list[index].sons[index2].sons[index3].select
				this.querySelectedItems()
			},
			/**
			 * 查找已选中的分类
			 */
			querySelectedItems() {
				let selectedDatas = []
				for (var i = 0; i < this.list.length; i++) {

					for (let j = 0; j < this.list[i].sons.length; j++) {
						for (let k = 0; k < this.list[i].sons[j].sons.length; k++) {
							let item = this.list[i].sons[j].sons[k]
							if (item.select) {
								selectedDatas.push(item)
							}
						}
					}
				}
				this.selectedDatas = selectedDatas
				let baseTitle = this.isArea ? '地区' : '筛选'
				this.title = selectedDatas.length == 0 ? baseTitle : `${baseTitle} - ${this.selectedDatas.length}`
			},
			/**
			 * 删除选中状态
			 * @param {Object} index 
			 */
			deleteSelectedItem(index) {
				this.selectedDatas[index].select = false
				this.selectedDatas.splice(index, 1)
				console.log(this.selectedDatas)
			},
			/**
			 * 重置
			 */
			reset() {
				for (var i = 0; i < this.selectedDatas.length; i++) {
					this.selectedDatas[i].select = false
				}
				this.selectedDatas = []
				this.title = '筛选'
				this.confirm()
			},
			/**
			 * 确定
			 */
			confirm() {
				// if (this.selectedDatas.length == 0) {
				// 	this.$refs.toast.show('请选择分类')
				// 	return
				// }
				this.getOpenerEventChannel().emit('filterTaskEnd', this.selectedDatas)
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.filter-item {
		width: calc((100vw - 147px) / 2.0);
		height: 32px;
		background: #F7F9FD;
		border-radius: 6px;
		margin-left: 12px;
		margin-bottom: 12px;
		color: #6B7885;
		font-size: 12px;
		font-weight: 400;
		display: flex;
		align-items: center;
		justify-content: center;

		&_active {
			background: #FFF9F6;
			color: #EB7520;
			border: 1px solid #EB7520;
		}
	}

	.filter_scroll__item {
		padding: 8px 10px;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color:  #FFF9F6;
		margin-left: 12px;
		border-radius: 6px;
		color: #313C56;
		font-size: 12px;
		font-weight: 400;
	}

	.filter_scroll {
		height: 48px;
		width: calc(100vw - 12px);
		border-bottom-color: #F3F5FB;
		border-bottom-style: solid;
		border-bottom-width: 1px;
	}

	.filter-toolbar__confirm {
		margin-left: 15px;
		color: white;
		border-radius: 8px;
		background-color: #EB7520;
		height: 44px;
		width: 215px;
	}

	.filter-toolbar__reset {
		color: #313C56;
		border-radius: 8px;
		border: 1px solid #D4D7DB;
		height: 44px;
		width: 72px;
	}

	.filter-toolbar {
		position: absolute;
		left: 0px;
		bottom: 0px;
		width: 100vw;
		background-color: white;
		font-size: 16px;
		font-weight: 400;
		border-top-color: #F3F5FB;
		border-top-width: 1px;
		border-top-style: solid;
	}
</style>